<template>
	<view class="IndexPage">
		<view class="content">
			<view class="ads-container"></view>
		</view>
		<view class="nav-container">
			<navigator class="nav-box fajc" url="/pages/TodoList/TodoList">代办事项</navigator>
			<navigator class="nav-box fajc" url="/pages/WareHouse/WareHouse">百宝箱</navigator>
		</view>
		<view class="notice-container">
			<view class="notice-title">
				进行中:
			</view>
			<view class="notice-content">
				<template v-for="(item, index) in todoItems">
					<todo-list-item :item='item' class='todoListItem' :key="index"></todo-list-item>
				</template>
			</view>
			<view class="notice-title">
				库存提醒:
			</view>
			<view class="notice-content">
				<template v-for="(item, index) in wareItems">
					<ware-item :item='item' class='wareItem' :key="index"></ware-item>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import TodoListItem from '../TodoList/TodoListItem.vue';
	import WareItem from '../WareHouse/WareItem.vue';
	export default {
		components: {
			TodoListItem,
			WareItem
		},
		data() {
			return {
				todoItems: [],
				wareItems: []
			}
		},
		onLoad() {
			this.getTodoItem()
			this.getWareItem()
		},
		// mounted() {
		// 	this.getTodoItem()
		// 	this.getWareItem()
		// },
		methods: {
			async getTodoItem() {
				const [err, res] = await uni.request({
					url: this.BASE_URL + '/getTodoItem/index'
				})
				this.todoItems = res.data.data
			},
			async getWareItem() {
				const [err, res] = await uni.request({
					url: this.BASE_URL + '/getWareItem/index'
				})
				this.wareItems = res.data.data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.IndexPage {
		.ads-container {
			width: 100%;
			height: 300rpx;
			background-color: skyblue;
		}
		.nav-container {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.nav-box {
				height: 90rpx;
				width: 40%;
				border: 1px solid #e4e6eb;
				border-radius: 12rpx;
			}
		}
		.notice-container {
			width: 100%;
			margin-top: 20rpx;
			.notice-title {
				color: #777;
				font-weight: bold;
				font-size: 14px;
				margin-left: 10rpx;
			}
			.notice-content {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				.todoListItem {
					width: 100%;
				}
				.wareItem {
					width: 50%;
				}
			}
		}
	}
</style>
